<template>
	<view class="page" :style="themeColor">
		<view class="flex align-stretch benben-position-layout flex editAddress_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex align-center justify-between flex-sub editAddress_fd0_0'>
				<view class='flex align-center editAddress_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
					data-url="1">
					<text class='fu-iconfont2  editAddress_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<view class='flex align-center'>
					<text class='editAddress_fd0_0_c1_c0' v-if="type=='2'">编辑地址</text><text
						class='editAddress_fd0_0_c1_c0_1' v-if="type=='1'">添加地址</text>
				</view>
				<view class='flex align-center justify-end editAddress_fd0_0_c2'
					@tap.stop="popupShow1668586473261=true">
					<text class='editAddress_fd0_0_c2_c0' v-if="type=='2'">删除</text>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!---添加地址flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout editAddress_flex_1">
			<view class='flex flex-wrap align-center editAddress_fd1_0'>
				<text class='editAddress_fd1_0_c0'>标签</text>
				<benben-select-diy ref="showSelectPopup1661562537774" class-name='flex align-center flex'
					:items.sync="addressType" v-model="addressType_id" default-type="id" default-label="name"
					:allow-cancel='true' type="radio" :disabled='false'>
					<template v-for='(item,key0) in addressType'>
						<view v-if="item.isSelected" class='flex align-center flex' :key="key0"
							@tap="$refs.showSelectPopup1661562537774.tapHandle(key0)">
							<text class='editAddress_fd1_0_c1_c0_c0'>{{item.name}}</text>
						</view>
						<view v-else class='flex align-center flex' :key="key0"
							@tap="$refs.showSelectPopup1661562537774.tapHandle(key0)">
							<text class='editAddress_fd1_0_c1_c1_c0'>{{item.name}}</text>
						</view>
					</template>
				</benben-select-diy>
				<text class='editAddress_fd1_0_c2' @tap.stop="addAddressLabel">+</text>
			</view>
			<view class='flex flex-wrap align-center editAddress_fd1_1'>
				<text class='editAddress_fd1_1_c0'>收货人</text>
				<input class='flex-sub editAddress_fd1_1_c1' type="text" placeholder="收货人" confirm-type="done"
					:maxlength="10" placeholder-style="color:#BFBFBF;font-size:32rpx" v-model="fd1_1_c1" />
				<benben-select-diy ref="showSelectPopup1661562715412" class-name='flex flex' :items.sync="sexType"
					v-model="sex_id" default-type="value" default-label="name" :allow-cancel='true' type="radio"
					:disabled='false'>
					<template v-for='(item,key0) in sexType'>
						<view v-if="item.isSelected" class='flex align-center flex editAddress_fd1_1_c2_c0' :key="key0"
							@tap="$refs.showSelectPopup1661562715412.tapHandle(key0)">
							<image class='editAddress_fd1_1_c2_c0_c0' mode="aspectFit" :src='STATIC_URL+"33.png"'>
							</image>
							<text class='editAddress_fd1_1_c2_c0_c1'>{{item.name}}</text>
						</view>
						<view v-else class='flex align-center flex editAddress_fd1_1_c2_c1' :key="key0"
							@tap="$refs.showSelectPopup1661562715412.tapHandle(key0)">
							<image class='editAddress_fd1_1_c2_c1_c0' mode="aspectFit" :src='STATIC_URL+"99.png"'>
							</image>
							<text class='editAddress_fd1_1_c2_c1_c1'>{{item.name}}</text>
						</view>
					</template>
				</benben-select-diy>
			</view>
			<view class='flex flex-wrap align-center editAddress_fd1_2'>
				<text class='editAddress_fd1_2_c0'>联系电话</text>
				<input class='flex-sub editAddress_fd1_2_c1' type="number" placeholder="联系电话" confirm-type="done"
					:maxlength="11" placeholder-style="color:#BFBFBF;font-size:32rpx" v-model="fd1_2_c1" />
			</view>
			<view class='flex flex-wrap align-center editAddress_fd1_3' @tap.stop="pickerDiy1661426359458=true">
				<text class='editAddress_fd1_3_c0'>所在地区</text>
				<input class='flex-sub editAddress_fd1_3_c1' type="text" placeholder="请选择省市区县、乡镇" confirm-type="done"
					:maxlength="-1" :disabled='true' placeholder-style="color:#BFBFBF;font-size:32rpx"
					v-model="address" />
				<image class='editAddress_fd1_3_c2' mode="aspectFit" :src='STATIC_URL+"74.png"'></image>
			</view>
			<view class='flex flex-wrap align-center editAddress_fd1_4'>
				<view class='flex flex-wrap editAddress_fd1_4_c0'>
					<textarea class='flex editAddress_input_fd1_4_c0' confirm-type="done"
						:placeholder="'请填写详细地址：如道路、门牌号、小区、楼栋号等'" :maxlength="240"
						placeholder-style="color:#BFBFBF;font-size:28rpx" v-model="fd1_4_c0" />

				</view>
			</view>
			<view class='flex flex-wrap align-center justify-between editAddress_fd1_5'>
				<text class='editAddress_fd1_5_c0'>设为默认地址</text>
				<u-switch v-model="is_default" active-color="#4781f5" size="32"></u-switch>
			</view>
		</view>
		<!---添加地址flex布局结束-->
		<view class="flex flex-direction align-center justify-center benben-position-layout flex editAddress_flex_2">
			<button class='editAddress_fd2_0' @tap.stop="getAddress" v-if="type=='2'">保存</button>
			<button class='editAddress_fd2_0_1' @tap.stop="getAddress" v-if="type=='1'">保存</button>
		</view>
	
		<view class="label_info" v-if="label_show">
			<view class="label_info_left">
				<input type="text" placeholder="请填写标签名称(最多5个字)" maxlength="5" v-model="label_name">
			</view>
			<view class="label_info_right" @tap.stop="addLabel">
				添加
			</view>
		</view>
		
		<view :style="{height: '88rpx'}"></view>
		<!--地址选择器开始 -->
		<benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1661426359458" :label.sync='address'
			mode='region' :mask-show='true' :picker-height='88' :hide-area='false' @change="change">
			<template #picker-header>
				<view class='flex flex-wrap align-center justify-between editAddress_picker3_0'>
					<text class='editAddress_picker3_0_c0' @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
					<text class='editAddress_picker3_0_c1'>选择地址</text>
					<text class='editAddress_picker3_0_c2'
						@tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确定</text>
				</view>
			</template>
		</benben-picker>
		<!--地址选择器结束 -->
		<benben-popup v-model="popupShow1668586473261" :mask="true" mode='center'>
			<!---删除地址弹窗flex布局开始-->
			<view class="flex flex-direction flex-wrap align-center editAddress_flex_4">
				<text class='editAddress_fd4_0'>提示</text>
				<text class='editAddress_fd4_1'>确定删除地址？</text>
				<view class='flex flex-wrap align-center editAddress_fd4_2'>
					<button class='editAddress_fd4_2_c0' @tap.stop="popupShow1668586473261=false">取消</button>
					<button class='editAddress_fd4_2_c1' @tap.stop="delAddress">确定</button>
				</view>
			</view>
			<!---删除地址弹窗flex布局结束-->
		</benben-popup>
		
	</view>
</template>
<script>
	import {
	    validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},

		data() {
			return {
				"popupShow1668586473261": false,
				"pickerDiy1661426359458": false,
				"fd1_1_c1": "",
				"fd1_2_c1": "",
				"fd1_4_c0": "",
				"is_default": false,
				"address": "",
				"addressType": [],
				"addressType_id": "",
				"sexType": [{
					"name": "先生",
					"value": "1",
					"image": ""
				}, {
					"name": "女士",
					"value": "2",
					"image": ""
				}],
				"sex_id": "1",
				"id": "",
				"type": "",
				"label_name": "",
				"label_show": false,
				"province": "", // 省
				"city": "", // 市
				"district": "", // 区
				"addressInfo": {}
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				id,
				type
			} = options
			if (id !== undefined) this.id = id
			if (type !== undefined) this.type = type
			if (this.type == 2) {
				this.getDetail();
			} else {
				this.getLabelList();
			}
			
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			getDetail() {
				this.$api.post(global.apiUrls.post6436beca7bbb5, {
					address_id: this.id
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.getLabelList();
						this.addressInfo = res.data.data;
						this.fd1_1_c1 = res.data.data.name;
						this.fd1_2_c1 = res.data.data.mobile;
						this.sex_id = res.data.data.sex;
						this.fd1_2_c1 = res.data.data.mobile;
						this.address = res.data.data.province + res.data.data.city + res.data.data.district;
						this.fd1_4_c0 = res.data.data.address;
						this.is_default = res.data.data.is_default == 0 ? false : true;
						this.province = res.data.data.province;
						this.city = res.data.data.city;
						this.district = res.data.data.district;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 获取标签  post6436bf17932ec
			getLabelList() {
				this.$api.post(global.apiUrls.post6436bf17932ec, {
					
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.addressType = res.data.data;
						if (this.type == 2) {
							this.addressType_id = this.addressInfo.label_id;
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			addAddressLabel() {
				this.label_show = true;
			},
			
			// 添加标签  post6436bf29c93c5
			addLabel() {
				this.$api.post(global.apiUrls.post6436bf29c93c5, {
					name: this.label_name
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.label_name = '';
						this.label_show = false;
						this.getLabelList();
					}
				})
			},
			change(e) {
				this.province = e.obj.province.label;
				this.city = e.obj.city.label;
				this.district = e.obj.area.label;
			},
			
			// 添加地址  
			getAddress() {
				if (!this.fd1_1_c1) {
					this.$message.info('请输入收货人');
					return;
				}
				if (!this.fd1_2_c1) {
					this.$message.info('请输入联系电话');
					return;
				}
				if (!validate(this.fd1_2_c1, 'phone')) {
				    this.$message.info('请输入正确的联系电话');
				    return false;
				}
				if (!this.address) {
					this.$message.info('请选择所在地区');
					return;
				}
				if (!this.fd1_4_c0) {
					this.$message.info('请输入详细地址');
					return;
				}
				
				// 添加
				if (this.type == 1) {
					this.$api.post(global.apiUrls.post6436beba3896f, {
						label_id: this.addressType_id,
						name: this.fd1_1_c1,
						mobile: this.fd1_2_c1,
						sex: this.sex_id,
						province: this.province,
						city: this.city,
						district: this.district,
						address: this.fd1_4_c0,
						is_default: this.is_default ? 1 : 0
					}).then(res => {
						this.$message.info(res.data.msg);
						if (res.data.code == 1) {
							uni.$emit('select_address', 1);
							setTimeout(() => {
								uni.navigateBack();
							}, 800)
						}
					})
				} else {
					this.$api.post(global.apiUrls.post6436bee11c1be, {
						address_id: this.id,
						label_id: this.addressType_id,
						name: this.fd1_1_c1,
						mobile: this.fd1_2_c1,
						sex: this.sex_id,
						province: this.province,
						city: this.city,
						district: this.district,
						address: this.fd1_4_c0,
						is_default: this.is_default ? 1 : 0
					}).then(res => {
						this.$message.info(res.data.msg);
						if (res.data.code == 1) {
							setTimeout(() => {
								uni.navigateBack();
							}, 800)
						}
					})
				}
			},
			
			// 删除地址
			delAddress() {
				this.$api.post(global.apiUrls.post6436bef2f20af, {
					address_id: this.addressInfo.address_id
				}).then(res => {
					this.$message.info(res.data.msg);
					this.popupShow1668586473261 = false;
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #F8F8F8;
		background-size: 100% auto !important;
	}
	.label_info {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #fff;
		z-index: 999;
		display: flex;
		padding: 17rpx 32rpx 0;
		.label_info_left {
			width: calc(100% - 144rpx);
			margin-right: 24rpx;
			input {
				font-size: 28rpx;
				background: #f6f7f8;
				border-radius: 32rpx;
				height: 66rpx;
				padding: 0 24rpx;
			}
		}
		.label_info_right {
			width: 120rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			border-radius: 32rpx;
			color: #fff;
			background: #4781f5;
			font-size: 26rpx;
		}
	}

	.editAddress_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.editAddress_fd0_0_c2_c0 {
		color: #666666;
		font-size: 32rpx;
		font-weight: 500;
	}

	.editAddress_fd0_0_c2 {
		width: 180rpx;
	}

	.editAddress_fd0_0_c1_c0_1 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.editAddress_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.editAddress_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}

	.editAddress_fd0_0_c0 {
		width: 180rpx;
	}

	.editAddress_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.editAddress_flex_1 {
		background: #fff;
		background-size: 100% !important;
		background-size: 100% auto !important;
		padding: 0rpx 0rpx 0rpx 32rpx;
	}

	.editAddress_fd1_5_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.editAddress_fd1_5 {
		padding: 32rpx 32rpx 32rpx 0rpx;
	}

	.editAddress_input_fd1_4_c0 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		width: 100%;
		height: 110rpx;
	}

	.editAddress_fd1_4_c0 {
		background: rgba(246, 246, 246, 1);
		background-size: 100% !important;
		width: 680rpx;
		padding: 24rpx 24rpx 24rpx 24rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		height: 160rpx;
	}

	.editAddress_fd1_4 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 32rpx 32rpx 0rpx;
	}

	.editAddress_fd1_3_c2 {
		width: 14rpx;
		height: 22rpx;
	}

	.editAddress_fd1_3_c1 {
		padding: 0rpx 0rpx 0rpx 40rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 45rpx;
	}

	.editAddress_fd1_3_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.editAddress_fd1_3 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 32rpx 32rpx 0rpx;
	}

	.editAddress_fd1_2_c1 {
		padding: 0rpx 0rpx 0rpx 40rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 45rpx;
	}

	.editAddress_fd1_2_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.editAddress_fd1_2 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 32rpx 32rpx 0rpx;
	}

	.editAddress_fd1_1_c2_c1_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #999999;
		margin: 0rpx 0rpx 0rpx 12rpx;
	}

	.editAddress_fd1_1_c2_c1_c0 {
		width: 36rpx;
		height: 36rpx;
	}

	.editAddress_fd1_1_c2_c1 {
		margin: 0rpx 32rpx 0rpx 0rpx;
	}

	.editAddress_fd1_1_c2_c0_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 0rpx 0rpx 12rpx;
	}

	.editAddress_fd1_1_c2_c0_c0 {
		width: 36rpx;
		height: 36rpx;
	}

	.editAddress_fd1_1_c2_c0 {
		margin: 0rpx 32rpx 0rpx 0rpx;
	}

	.editAddress_fd1_1_c1 {
		padding: 0rpx 0rpx 0rpx 72rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		line-height: 45rpx;
	}

	.editAddress_fd1_1_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.editAddress_fd1_1 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.editAddress_fd1_0_c2 {
		border: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		margin: 0rpx 16rpx 0rpx 0rpx;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
		padding: 4rpx 21rpx 4rpx 21rpx;
	}

	.editAddress_fd1_0_c1_c1_c0 {
		border: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		margin: 0rpx 16rpx 0rpx 0rpx;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
		padding: 4rpx 12rpx 4rpx 12rpx;
	}

	.editAddress_fd1_0_c1_c0_c0 {
		background: #fff;
		border: 1px solid #333;
		background-size: 100% !important;
		margin: 0rpx 16rpx 0rpx 0rpx;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #333;
		padding: 4rpx 12rpx 4rpx 12rpx;
	}

	.editAddress_fd1_0_c0 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 101rpx 0rpx 0rpx;
	}

	.editAddress_fd1_0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 32rpx 32rpx 0rpx;
	}

	.editAddress_flex_2 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(32rpx + var(--window-bottom));
	}

	.editAddress_fd2_0_1 {
		background: #fff;
		background-size: 100% !important;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #333;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: 400;
	}

	.editAddress_fd2_0 {
		background: #fff;
		background-size: 100% !important;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #333;
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: 400;
	}

	.editAddress_picker3_0_c2 {
		color: var(--benbenFontColor0);
		font-size: 32rpx;
		font-weight: 500;
	}

	.editAddress_picker3_0_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.editAddress_picker3_0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #BFBFBF;
	}

	.editAddress_picker3_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 100rpx;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		background-size: 100% auto !important;
	}

	.editAddress_flex_4 {
		background: #fff;
		background-size: 100% !important;
		margin: 0rpx 105rpx 0rpx 105rpx;
		background-size: #eee;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
	}

	.editAddress_fd4_2_c1 {
		background: transparent;
		background-size: 100% !important;
		line-height: 45rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: #4781f5;
		padding: 24rpx 103rpx 24rpx 99rpx;
	}

	.editAddress_fd4_2_c0 {
		border-right: 1px solid #EEEEEE;
		background: transparent;
		background-size: 100% !important;
		line-height: 45rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
		padding: 24rpx 103rpx 24rpx 103rpx;
	}

	.editAddress_fd4_2 {
		border-top: 1px solid #eee;
	}

	.editAddress_fd4_1 {
		font-size: 32rpx;
		font-weight: 400;
		line-height: 52rpx;
		color: #333333;
		margin: 0rpx 0rpx 38rpx 0rpx;
	}

	.editAddress_fd4_0 {
		font-size: 32rpx;
		font-weight: 500;
		line-height: 32rpx;
		color: #333333;
		margin: 40rpx 0rpx 36rpx 0rpx;
	}
</style>
